<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡和动画的区别</title>
  <style>
    .outer{
      width: 1000px;
      height: 200px;
      border: 1px solid black;
    }
    .inner{
      width: 100px;
      height: 100px;
    }

    @keyframes goRight {
      0%{

      }
      100%{
        transform: translate(900px);
      }
    }
    .inner1{
      background-color: orange;

      transition: all 1s linear;

    }
    .inner2{
      background-color: green;
      animation: goRight linear 1s ;
    }
    .outer:hover .inner1{
      transform: translate(900px);
    }
    .outer:hover .inner2{

    }
  </style>
</head>
<body>
<div class="outer">
<!--
动画不需要触发条件,过渡需要触发条件
动画可以对变化过程中的每一步进行非常精细的调整,过渡无法做到精细的调整
-->
  <div class="inner inner1">过渡</div>
  <div class="inner inner2">动画</div>
</div>
</body>
</html>